<template>
    <div class="traffic-container page-container">
        <!-- 主体内容区 -->
        <div class="main-content">
            <!-- 左侧数据区 -->
            <div class="left-section">
                <!-- 交通便捷指数 -->
                <div class="panel-item">
                    <div class="panel-title">
                        <span class="icon">🚀</span>
                        交通便捷指数
                    </div>
                    <div class="convenience-index">
                        <div class="index-circle">
                            <div class="index-value">92.5</div>
                            <div class="index-label">便捷指数</div>
                        </div>
                        <div class="index-details">
                            <div class="detail-item" v-for="(item, index) in convenienceDetails" :key="index">
                                <div class="detail-label">{{ item.label }}</div>
                                <div class="detail-value">{{ item.value }}</div>
                                <div class="detail-trend" :class="item.trend">{{ item.change }}</div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 公共交通覆盖 -->
                <div class="panel-item">
                    <div class="panel-title">
                        <span class="icon">🌐</span>
                        公共交通覆盖
                    </div>
                    <div class="coverage-chart" ref="coverageChart"></div>
                </div>
            </div>

            <!-- 中间展示区 -->
            <div class="center-section">
                <!-- 实时交通网络 -->
                <div class="network-display">
                    <div class="network-title">广州交通网络实时状态</div>
                    <div class="network-grid">
                        <div class="network-node" v-for="(node, index) in networkNodes" :key="index" :class="node.status">
                            <div class="node-icon">{{ node.icon }}</div>
                            <div class="node-name">{{ node.name }}</div>
                            <div class="node-status">{{ node.statusText }}</div>
                            <div class="node-metrics">
                                <span class="metric">{{ node.metric1 }}</span>
                                <span class="metric">{{ node.metric2 }}</span>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 出行时间对比 -->
                <div class="travel-time-comparison">
                    <div class="comparison-title">不同交通方式出行时间对比</div>
                    <div class="comparison-chart" ref="comparisonChart"></div>
                </div>
            </div>

            <!-- 右侧信息区 -->
            <div class="right-section">
                <!-- 智能交通系统 -->
                
                    <div class="panel-item">
                        <el-scrollbar height="440px">
                            <div class="panel-title">
                                <span class="icon">🤖</span>
                                智能交通系统
                            </div>
                            <div class="smart-systems">
                                <div class="system-item" v-for="(system, index) in smartSystems" :key="index">
                                    <div class="system-icon">{{ system.icon }}</div>
                                    <div class="system-info">
                                        <div class="system-name">{{ system.name }}</div>
                                        <div class="system-status" :class="system.status">{{ system.statusText }}</div>
                                        <div class="system-efficiency">{{ system.efficiency }}</div>
                                    </div>
                                </div>
                            </div>
                        </el-scrollbar>
                    </div>
               

                <!-- 交通便利性分析 -->
                <div class="panel-item">
                    <div class="panel-title">
                        <span class="icon">📈</span>
                        便利性分析
                    </div>
                    <div class="convenience-analysis" ref="convenienceChart"></div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, onMounted, nextTick } from 'vue'
import * as echarts from 'echarts'

// 交通便捷指数详情
const convenienceDetails = ref([
    { label: '地铁密度', value: '0.85km/km²', change: '+0.02', trend: 'up' },
    { label: '公交站点', value: '15,680个', change: '+320', trend: 'up' },
    { label: '平均等待', value: '3.2分钟', change: '-0.5', trend: 'up' },
    { label: '换乘便利', value: '4.8分', change: '+0.2', trend: 'up' }
])

// 交通网络节点
const networkNodes = ref([
    { icon: '🚇', name: '地铁1号线', status: 'excellent', statusText: '运行优秀', metric1: '98.5%准点', metric2: '2.5分钟间隔' },
    { icon: '🚇', name: '地铁2号线', status: 'excellent', statusText: '运行优秀', metric1: '98.2%准点', metric2: '3分钟间隔' },
    { icon: '🚇', name: '地铁3号线', status: 'good', statusText: '运行良好', metric1: '97.8%准点', metric2: '3.5分钟间隔' },
    { icon: '🚇', name: '地铁4号线', status: 'excellent', statusText: '运行优秀', metric1: '98.7%准点', metric2: '2.8分钟间隔' },
    { icon: '🚇', name: '地铁5号线', status: 'good', statusText: '运行良好', metric1: '97.5%准点', metric2: '4分钟间隔' },
    { icon: '🚇', name: '地铁6号线', status: 'excellent', statusText: '运行优秀', metric1: '98.9%准点', metric2: '2.2分钟间隔' },
    { icon: '🚌', name: 'BRT快速公交', status: 'excellent', statusText: '运行优秀', metric1: '95.2%准点', metric2: '1.5分钟间隔' },
    { icon: '🚌', name: '机场快线', status: 'excellent', statusText: '运行优秀', metric1: '99.1%准点', metric2: '15分钟间隔' }
])

// 智能交通系统
const smartSystems = ref([
    { icon: '🚦', name: '智能信号灯', status: 'active', statusText: '运行中', efficiency: '通行效率提升35%' },
    { icon: '📱', name: '出行APP', status: 'active', statusText: '运行中', efficiency: '用户满意度96%' },
    { icon: '🚗', name: '共享出行', status: 'active', statusText: '运行中', efficiency: '覆盖率达85%' },
    { icon: '🎫', name: '一卡通系统', status: 'active', statusText: '运行中', efficiency: '使用率98%' },
    { icon: '📡', name: '实时监控', status: 'active', statusText: '运行中', efficiency: '监控覆盖率99%' }
])

// 图表实例
const coverageChart = ref<HTMLElement | null>(null)
const comparisonChart = ref<HTMLElement | null>(null)
const convenienceChart = ref<HTMLElement | null>(null)

const coverageChartInstance = ref<echarts.ECharts | null>(null)
const comparisonChartInstance = ref<echarts.ECharts | null>(null)
const convenienceChartInstance = ref<echarts.ECharts | null>(null)

// 初始化图表
onMounted(() => {
    nextTick(() => {
        setTimeout(() => {
            initCharts();
        }, 100);
    });
})

const initCharts = () => {
    // 公共交通覆盖图表
    if (coverageChart.value) {
        const chart = echarts.init(coverageChart.value)
        coverageChartInstance.value = chart;
        chart.setOption({
            tooltip: {
                trigger: 'item'
            },
            series: [
                {
                    name: '覆盖范围',
                    type: 'pie',
                    radius: ['30%', '70%'],
                    center: ['50%', '50%'],
                    data: [
                        { value: 45, name: '地铁覆盖', itemStyle: { color: '#00a1ff' } },
                        { value: 35, name: '公交覆盖', itemStyle: { color: '#00ff88' } },
                        { value: 15, name: '共享单车', itemStyle: { color: '#ffd700' } },
                        { value: 5, name: '其他方式', itemStyle: { color: '#9370db' } }
                    ],
                    label: {
                        show: true,
                        color: '#fff',
                        formatter: '{b}: {c}%'
                    },
                    labelLine: {
                        show: true,
                        lineStyle: { color: '#fff' }
                    }
                }
            ]
        })
        
        setTimeout(() => {
            chart.resize();
        }, 50);
    }

    // 出行时间对比图表
    if (comparisonChart.value) {
        const chart = echarts.init(comparisonChart.value)
        comparisonChartInstance.value = chart;
        chart.setOption({
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
            legend: {
                data: ['高峰期', '平峰期'],
                textStyle: { color: '#fff' }
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: {
                type: 'category',
                data: ['地铁', '公交', '私家车', '共享单车', '步行'],
                axisLabel: { color: '#fff' }
            },
            yAxis: {
                type: 'value',
                name: '时间(分钟)',
                axisLabel: { color: '#fff' }
            },
            series: [
                {
                    name: '高峰期',
                    type: 'bar',
                    data: [25, 45, 35, 20, 60],
                    itemStyle: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                            { offset: 0, color: '#ff6b6b' },
                            { offset: 1, color: 'rgba(255, 107, 107, 0.3)' }
                        ])
                    }
                },
                {
                    name: '平峰期',
                    type: 'bar',
                    data: [20, 35, 25, 15, 60],
                    itemStyle: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                            { offset: 0, color: '#00a1ff' },
                            { offset: 1, color: 'rgba(0, 161, 255, 0.3)' }
                        ])
                    }
                }
            ]
        })
        
        setTimeout(() => {
            chart.resize();
        }, 50);
    }

    // 便利性分析图表
    if (convenienceChart.value) {
        const chart = echarts.init(convenienceChart.value)
        convenienceChartInstance.value = chart;
        chart.setOption({
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross',
                    label: {
                        backgroundColor: '#6a7985'
                    }
                }
            },
            legend: {
                data: ['便利指数', '满意度'],
                textStyle: { color: '#fff' }
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: [
                {
                    type: 'category',
                    data: ['天河区', '越秀区', '海珠区', '荔湾区', '白云区', '黄埔区'],
                    axisLabel: { color: '#fff' }
                }
            ],
            yAxis: [
                {
                    type: 'value',
                    axisLabel: { color: '#fff' }
                }
            ],
            series: [
                {
                    name: '便利指数',
                    type: 'line',
                    smooth: true,
                    lineStyle: {
                        width: 3,
                        color: '#00a1ff'
                    },
                    areaStyle: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                            { offset: 0, color: 'rgba(0, 161, 255, 0.3)' },
                            { offset: 1, color: 'rgba(0, 161, 255, 0.1)' }
                        ])
                    },
                    data: [95, 92, 88, 85, 90, 87]
                },
                {
                    name: '满意度',
                    type: 'line',
                    smooth: true,
                    lineStyle: {
                        width: 3,
                        color: '#00ff88'
                    },
                    areaStyle: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                            { offset: 0, color: 'rgba(0, 255, 136, 0.3)' },
                            { offset: 1, color: 'rgba(0, 255, 136, 0.1)' }
                        ])
                    },
                    data: [92, 89, 85, 82, 88, 84]
                }
            ]
        })
        
        setTimeout(() => {
            chart.resize();
        }, 50);
    }
}
</script>

<style scoped lang="scss">
.traffic-container {
    background: linear-gradient(135deg, #0c1426 0%, #1a2332 50%, #2d3748 100%);
    color: #fff;
    display: flex;
    flex-direction: column;
    gap: 20px;
    overflow: hidden;

    .main-content {
        flex: 1;
        display: flex;
        gap: 20px;

        .left-section, .right-section {
            width: 30%;
            display: flex;
            flex-direction: column;
            gap: 20px;

            .panel-item {
                background: rgba(255, 255, 255, 0.08);
                border-radius: 15px;
                padding: 20px;
                backdrop-filter: blur(15px);
                border: 1px solid rgba(255, 255, 255, 0.1);
                // overflow: hidden;
                flex: 1;
                height: 100%;

                .panel-title {
                    font-size: 18px;
                    margin-bottom: 20px;
                    color: #00d4ff;
                    display: flex;
                    align-items: center;
                    gap: 10px;
                    font-weight: 600;

                    .icon {
                        font-size: 24px;
                    }
                }

                .convenience-index {
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    gap: 20px;

                    .index-circle {
                        width: 120px;
                        height: 120px;
                        border-radius: 50%;
                        background: linear-gradient(135deg, #00d4ff, #0099cc);
                        display: flex;
                        flex-direction: column;
                        align-items: center;
                        justify-content: center;
                        box-shadow: 0 0 30px rgba(0, 212, 255, 0.3);

                        .index-value {
                            font-size: 28px;
                            font-weight: bold;
                            color: #fff;
                        }

                        .index-label {
                            font-size: 12px;
                            color: rgba(255, 255, 255, 0.8);
                        }
                    }

                    .index-details {
                        display: grid;
                        grid-template-columns: 1fr 1fr;
                        gap: 15px;

                        .detail-item {
                            text-align: center;
                            padding: 12px;
                            background: rgba(255, 255, 255, 0.05);
                            border-radius: 8px;
                            position: relative;

                            .detail-label {
                                font-size: 12px;
                                color: #a0a0a0;
                                margin-bottom: 5px;
                            }

                            .detail-value {
                                font-size: 16px;
                                font-weight: bold;
                                color: #00d4ff;
                                margin-bottom: 3px;
                            }

                            .detail-trend {
                                font-size: 10px;
                                padding: 2px 6px;
                                border-radius: 4px;

                                &.up {
                                    color: #00ff88;
                                    background: rgba(0, 255, 136, 0.1);
                                }

                                &.down {
                                    color: #ff6b6b;
                                    background: rgba(255, 107, 107, 0.1);
                                }
                            }
                        }
                    }
                }

                .coverage-chart {
                    height: calc(100% - 60px);
                }

                .smart-systems {
                    .system-item {
                        display: flex;
                        align-items: center;
                        gap: 15px;
                        padding: 15px;
                        margin-bottom: 15px;
                        background: rgba(255, 255, 255, 0.05);
                        border-radius: 10px;
                        transition: all 0.3s ease;

                        &:hover {
                            background: rgba(255, 255, 255, 0.1);
                            transform: translateX(5px);
                        }

                        .system-icon {
                            font-size: 28px;
                            width: 50px;
                            height: 50px;
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            background: rgba(0, 212, 255, 0.1);
                            border-radius: 10px;
                        }

                        .system-info {
                            flex: 1;

                            .system-name {
                                font-size: 16px;
                                font-weight: 600;
                                margin-bottom: 5px;
                            }

                            .system-status {
                                font-size: 12px;
                                padding: 3px 8px;
                                border-radius: 4px;
                                margin-bottom: 5px;

                                &.active {
                                    color: #00ff88;
                                    background: rgba(0, 255, 136, 0.1);
                                }
                            }

                            .system-efficiency {
                                font-size: 12px;
                                color: #a0a0a0;
                            }
                        }
                    }
                }

                .convenience-analysis {
                    height: calc(100% - 60px);
                }
            }
        }

        .center-section {
            flex: 1;
            display: flex;
            flex-direction: column;
            gap: 20px;

            .network-display {
                background: rgba(255, 255, 255, 0.08);
                border-radius: 15px;
                padding: 20px;
                backdrop-filter: blur(15px);
                border: 1px solid rgba(255, 255, 255, 0.1);
                box-sizing: border-box;

                .network-title {
                    font-size: 20px;
                    font-weight: 600;
                    color: #00d4ff;
                    margin-bottom: 20px;
                    text-align: center;
                }

                .network-grid {
                    display: grid;
                    grid-template-columns: repeat(4, 1fr);
                    gap: 15px;

                    .network-node {
                        padding: 15px;
                        background: rgba(255, 255, 255, 0.05);
                        border-radius: 10px;
                        text-align: center;
                        transition: all 0.3s ease;
                        border: 2px solid transparent;

                        &:hover {
                            transform: translateY(-5px);
                            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
                        }

                        &.excellent {
                            border-color: #00ff88;
                            background: rgba(0, 255, 136, 0.05);
                        }

                        &.good {
                            border-color: #00d4ff;
                            background: rgba(0, 212, 255, 0.05);
                        }

                        .node-icon {
                            font-size: 32px;
                            margin-bottom: 10px;
                        }

                        .node-name {
                            font-size: 14px;
                            font-weight: 600;
                            margin-bottom: 8px;
                        }

                        .node-status {
                            font-size: 12px;
                            color: #00ff88;
                            margin-bottom: 8px;
                        }

                        .node-metrics {
                            display: flex;
                            flex-direction: column;
                            gap: 3px;

                            .metric {
                                font-size: 10px;
                                color: #a0a0a0;
                                background: rgba(255, 255, 255, 0.05);
                                padding: 2px 6px;
                                border-radius: 4px;
                            }
                        }
                    }
                }
            }

            .travel-time-comparison {
                flex: 1;
                background: rgba(255, 255, 255, 0.08);
                border-radius: 15px;
                padding: 20px;
                backdrop-filter: blur(15px);
                border: 1px solid rgba(255, 255, 255, 0.1);

                .comparison-title {
                    font-size: 18px;
                    font-weight: 600;
                    color: #00d4ff;
                    margin-bottom: 20px;
                    text-align: center;
                }

                .comparison-chart {
                    height: calc(100% - 50px);
                }
            }
        }
    }
}

@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.7;
    }
}

.network-node.excellent {
    animation: pulse 2s infinite;
}
</style>